$(function() {

  //越界人员管理窗口

  //下拉按钮
  $(".button-down").on("click", function() {
    $(".yuejie-main").slideToggle(300);
    $(".yuejie-tab").toggle();
    $(this).children().first().toggle();
    $(this).children().last().toggle();
  })

  //查询页面下拉框
  $(".yuejie-search-filter-left").on("click", function() {
    $(".yuejie-search-filter-left ul").slideToggle(260);
  })

  $(".yuejie-search-filter-left li").on("click", function() {
    var chose = $(this).html();
    $(".yuejie-search-filter-left span").html(chose);
    $(".yuejie-search-filter-left ul").slideUp(260);
    return false;
  })

  $(".yuejie-search-filter-right").on("click", function() {
    $(".yuejie-search-filter-right ul").slideToggle(260);
  })

  $(".yuejie-search-filter-right li").on("click", function() {
    var chose = $(this).html();
    $(".yuejie-search-filter-right span").html(chose);
    $(".yuejie-search-filter-right ul").slideUp(260);
    return false;
  })

  //tab切换
  $(".yuejie-list-li").on("click", function() {
    $(".yuejie-list").children().removeClass("yuejie-list-li-choose");
    $(this).addClass('yuejie-list-li-choose');
    if ($(this).index() == 0) {
      $(".yuejie-solution").show();
      $(".yuejie-search").hide();
      $(".yuejie-range").hide();
    } else if ($(this).index() == 1) {
      $(".yuejie-solution").hide();
      $(".yuejie-search").show();
      $(".yuejie-range").hide();
    } else {
      $(".yuejie-solution").hide();
      $(".yuejie-search").hide();
      $(".yuejie-range").show();
    }
  })

  //今日情况饼图

  var todayChart = echarts.init(document.getElementById('today-chart'));

  var todayOption = {
    color: ["#ffb037", "#5f9fff"],
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [{
      name: '越界人数',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [{
        value: 12,
        name: '越界'
      }, {
        value: 70,
        name: '非越界'
      }, ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };
  todayChart.setOption(todayOption);


  //历史情况折线图
  var historyChart = echarts.init(document.getElementById('history-chart'));

  var historyOption = {
    color: ['#6a8a29'],
    xAxis: {
      data: ["4-21", "4-22", "4-23", "4-24", "4-25", "4-26", "4-27"]
    },
    yAxis: {
      show: false,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    series: [{
      name: '销量',
      type: 'line',
      symbol: 'circle',
      label: {
        normal: {
          show: true
        }
      },
      data: [76, 82, 64, 71, 68, 59, 92]
    }]
  };
  historyChart.setOption(historyOption);

  //自定义日期格式
  $("#yuejie-search-date-input").on("click", function() {
    laydate({
      istime: true,
      format: 'YYYY-MM-DD',
      choose: function(datas) {
        alert('得到' + datas)
      }
    });
  })



  //分页器 查询窗口

  function createSearchList() {
    var container = $('.yuejie-pagination');
    var sources = function() {
      var result = [];

      for (var i = 1; i < 196; i++) {
        result.push(i);
      }

      return result;
    }();

    var options = {
      dataSource: sources,
      callback: function(response, pagination) {
        window.console && console.log(response, pagination);

        var dataHtml = '';

        $.each(response, function(index, item) {
          dataHtml += '<tr>' + '<td>网格员' + item + '</td>' + '<td>张三</td>' + '<td ><img src="static/image/icon_video.png"></td>' + '</tr>';
        });

        // dataHtml += '</ul>';

        $('.yuejie-wangeyuan-tbody').html(dataHtml);
      }
    };

    // $.pagination(container, options);

    container.addHook('beforeInit', function() {
      window.console && console.log('beforeInit...');
    });
    container.pagination(options);

    container.addHook('beforePageOnClick', function() {
      window.console && console.log('beforePageOnClick...');
    });

    return container;
  }

  createSearchList();

  //分页器 越界排行
  function createRangeList() {
    var container = $('.yuejie-range-footer-pagination');
    var sources = function() {
      var result = [];

      for (var i = 1; i < 196; i++) {
        result.push(i);
      }

      return result;
    }();

    var options = {
      dataSource: sources,
      pageSize:13,
      callback: function(response, pagination) {
        window.console && console.log(response, pagination);

        var dataHtml = '';

        $.each(response, function(index, item) {
          dataHtml += '<tr>' + '<td>张三</td><td >' + item + '</td>' + '<td>4h</td><td>1.1km</td>' + '<td >'+item+'</td>' + '</tr>';
        });

        // dataHtml += '</ul>';

        $('.yuejie-range-tbody').html(dataHtml);
      }
    };

    // $.pagination(container, options);

    container.addHook('beforeInit', function() {
      window.console && console.log('beforeInit...');
    });
    container.pagination(options);

    container.addHook('beforePageOnClick', function() {
      window.console && console.log('beforePageOnClick...');
    });

    return container;
  }

  createRangeList();




  //人员管理窗口

  $(".people-manage-left-basic").on("click", function() {
    $(".people-manage-left-yuejie").removeClass("people-manage-left-tab-chose");
    $(this).addClass("people-manage-left-tab-chose");
    $(".people-manage-basic").show();
    $(".people-manage-yuejie").hide();
  })

  $(".people-manage-left-yuejie").on("click", function() {
    $(".people-manage-left-basic").removeClass("people-manage-left-tab-chose");
    $(this).addClass("people-manage-left-tab-chose");
    $(".people-manage-basic").hide();
    $(".people-manage-yuejie").show();
  })

  $("#people-manage-date-start").on("click", function() {
    laydate({
      istime: true,
      format: 'YYYY-MM-DD',
      choose: function(datas) {
        alert('开始时间' + datas)
      }
    });
  })

  $("#people-manage-date-end").on("click", function() {
    laydate({
      istime: true,
      format: 'YYYY-MM-DD',
      choose: function(datas) {
        alert('结束时间' + datas)
      }
    });
  })

})
